<template>
  <div>
    <button @click="isShow = !isShow"> 显示/隐藏</button>
    <h1 :class="myAnim" v-show=isShow>Hello world</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data(){
    return {
      isShow: true
    }
  },
  computed:{
    myAnim(){
      return this.isShow ? 'come' : 'to'
    }
  }

}
</script>
<style scoped>
h1 {
 background-color: orange;
}
.come{
  animation: anim 1s linear;
}
.to{
  animation: anim 1s linear reverse;
}
@keyframes anim {
  from{
    transform: translateX(-100%);
  }
  to{
    transform: translateX(0px);
  }
}
</style>
